import React, { useState, useEffect } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  const [num, setNum] = useState(8)
  const handleClick = () => {
    setCount(count + 1)
  }
  /* useEffect(() => {
    console.log('~~~')
    // 所有状态的变化都会走这里，期望只有 count 变化才会走这里
    document.title = count
  }) */
  useEffect(() => {
    console.log('~~~')
    document.title = count
    // 初始化也会执行这里的回调
    // 第二个参数是一个数组，可以指定依赖项，里面写了 count，表示只依赖 count，只有 count 的变化才会走这里的回调
  }, [count])
  return (
    <div>
      <p>{count}</p>
      <p>{num}</p>
      <button onClick={handleClick}>+1</button>
      <button onClick={() => setNum(num + 1)}>+num</button>
    </div>
  )
}
